<template>
  <div id="info" style="padding: 10px;">
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="50%"
      top="10%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
    >
      <el-form ref="form" :model="submitForm">
        <el-form-item prop="jgznDesp" :rules="[{ required: true, message: '请输入主要职责', trigger: 'blur' }]">
          <el-input v-model="submitForm.jgznDesp" type="textarea" :rows="5" maxlength="200" show-word-limit/>
        </el-form-item>
      </el-form>
      <div style="color: red; font-weight: bolder;">提示：主要职责请分项填写</div>
      <div style="text-align: center; margin-top: 20px;">
        <el-button type="primary" :loading="btnLoading" @click="submit('form')">确定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <el-scrollbar style="height: calc(100vh - 194px)">
      <div v-if="flag === 'user'" style="display: flex; justify-content: space-between; margin-bottom: 10px;">
        <span>
          <el-button type="primary" icon="el-icon-arrow-up" :loading="btnLoading" :disabled="!moveUpFlag" @click="moveData(true)">上移</el-button>
          <el-button type="primary" icon="el-icon-arrow-down" :loading="btnLoading" :disabled="!moveDownFlag" @click="moveData(false)">下移</el-button>
        </span>
        <span>
          <el-button type="success" icon="el-icon-plus" @click="addData()">新增</el-button>
          <el-popconfirm
            title="确定批量删除所选信息吗？"
            @onConfirm="deleteData()"
            @confirm="deleteData()"
            style="margin-left: 10px;"
          >
            <el-button slot="reference" type="danger" class="filter-item" icon="el-icon-delete">批量删除</el-button>
          </el-popconfirm>
        </span>
      </div>
      <section class="wboxd">
        <el-table
          ref="multipleTable"
          :data="listInfo"
          border
          highlight-current-row
          v-loading="listLoading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column v-if="flag === 'user'" key="selection" align="center" type="selection" width="50px">
          </el-table-column>
          <el-table-column key="index" label="序号" align="center" type="index" width="80px">
          </el-table-column>
          <el-table-column key="jgznDesp" prop="jgznDesp" label="主要职责" align="center">
            <template slot-scope="scope">
              <div style="text-align: left;">{{ scope.row.jgznDesp }}</div>
            </template>
          </el-table-column>
          <el-table-column v-if="flag === 'user'" key="handle" label="操作" align="center" width="160px">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="editData(scope.row)">修改</el-button>
              <el-popconfirm
                title="确认要删除该信息吗"
                @onConfirm="deleteData(scope.row.dataId)"
                @confirm="deleteData(scope.row.dataId)"
              >
                <el-button slot="reference" size="small" type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </section>
      <div class="block">
        <el-pagination style="float:right" :total="totalnum" :page-size="pageSize" @current-change="handleCurrentChange" :current-page="pageNum" @size-change="handleSizeChange" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: 'DetailDuty',
  props: {
    jgsyCode: '',
    flag: ''
  },
  watch: {
    jgsyCode: {
      handler () {
        this.getList()
      },
      immediate: true
    }
  },
  data () {
    return {
      listLoading: false,
      pageNum: 1,
      pageSize: 10,
      totalnum: null,
      changeSizeFlag: false,
      listInfo: [],
      dialogTitle: '',
      dialogVisible: false,
      submitForm: {
        dataId: null,
        jgsyCode: '',
        jgznDesp: ''
      },
      btnLoading: false,
      multipleSelection: [],
      moveUpFlag: false,
      moveDownFlag: false
    }
  },
  methods: {
    // 获取列表
    getList (selectedId) {
      const para = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        jgsyCode: this.jgsyCode
      }
      this.listLoading = true
      this.$http
        .post(this.$http.defaults.headcountAPI + `api/jgzn/queryByPage`, para)
        .then(response => {
          if (response.data.success) {
            this.listLoading = false
            this.listInfo = response.data.result.records
            this.totalnum = response.data.result.total
            this.changeSizeFlag = false
            if (selectedId) {
              this.$nextTick(() => {
                let newrow = this.listInfo.find(item => item.dataId === selectedId)
                this.$refs.multipleTable.toggleRowSelection(newrow)
              })
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
            this.listLoading = false
          }
        })
        .catch(error => {
          this.$message({
            message: '网络获取失败:' + error,
            type: 'error'
          })
          this.listLoading = false
        })
    },
    handleSizeChange (val) {
      this.changeSizeFlag = true
      this.pageNum = 1
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      if (this.changeSizeFlag === false) {
        this.pageNum = val
        this.getList()
      }
    },
    // 新增
    addData () {
      this.submitForm.dataId = null
      this.submitForm.jgsyCode = ''
      this.submitForm.jgznDesp = ''
      this.dialogTitle = '新增'
      this.dialogVisible = true
    },
    // 编辑
    editData (row) {
      this.submitForm = {...row}
      this.dialogTitle = '编辑'
      this.dialogVisible = true
    },
    // 提交
    submit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const para = {...this.submitForm}
          para.jgsyCode = this.jgsyCode
          this.btnLoading = true
          this.$http
            .post(this.$http.defaults.headcountAPI + 'api/jgzn/save', para)
            .then(response => {
              if (response.data.success === true) {
                this.btnLoading = false
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.dialogVisible = false
                this.getList()
              } else {
                console.log('操作失败:' + response.data.message)
                this.$message({
                  message: '操作失败:' + response.data.message,
                  type: 'error'
                })
                this.btnLoading = false
              }
            })
            .catch(error => {
              console.log(error)
              this.btnLoading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 批量删除
    handleSelectionChange (val) {
      this.multipleSelection = val
      this.moveUpFlag = false
      this.moveDownFlag = false
      if (this.multipleSelection.length === 1) {
        this.moveUpFlag = true
        this.moveDownFlag = true
        if (this.listInfo.findIndex(item => item.dataId === this.multipleSelection[0].dataId) === 0) {
          this.moveUpFlag = false
        }
        if (this.listInfo.findIndex(item => item.dataId === this.multipleSelection[0].dataId) === this.listInfo.length - 1) {
          this.moveDownFlag = false
        }
      }
    },
    // 删除
    deleteData (id) {
      let ids = []
      if (id) {
        ids = [id]
      } else {
        ids = this.multipleSelection.map(item => item.dataId)
      }
      if (ids.length > 0) {
        this.$http
          .post(this.$http.defaults.headcountAPI + 'api/jgzn/remove', { ids: ids })
          .then(response => {
            if (response.data.success === true) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getList()
            } else {
              console.log('删除失败:' + response.data.message)
              this.$message({
                message: '删除失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            console.log(error)
          })
      } else {
        this.$message({
          message: '请至少选择一条信息',
          type: 'danger'
        })
      }
    },
    // 上移/下移
    moveData (flag) {
      let para = {
        id: this.multipleSelection[0].dataId,
        up: flag
      }
      this.btnLoading = true
      this.$http.post(this.$http.defaults.headcountAPI + `api/jgzn/updateOrder`, para)
        .then(response => {
          if (response.data.success === true) {
            this.btnLoading = false
            this.getList(this.multipleSelection[0].dataId)
          } else {
            console.log('调整顺序失败:' + response.data.message)
            this.$message({
              message: '调整顺序失败:' + response.data.message,
              type: 'error'
            })
            this.btnLoading = false
          }
        }).catch(error => {
          console.log(error)
          this.$message({
            message: '调整顺序失败:' + error,
            type: 'error'
          })
          this.btnLoading = false
        })
    }
  }
}
</script>
